<template>
  <div class="customer_list_search">
    <el-form :model="formData" label-width="auto">
      <el-row class="el_filter_row" :gutter="20">
        <el-col :span="8"
          ><el-form-item label="客户信息"><el-input v-model="formData.mobile_or_name" placeholder="请输入客户手机号｜姓名｜昵称搜索"> </el-input></el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="客户来源">
            <el-select multiple v-model="formData.source_id" placeholder="请选择客户来源">
              <el-option :label="item.name" :value="item.id" v-for="item in sourceArr" :key="item.value"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col v-if="activeName != 1 && activeName != 2" :span="8">
          <el-form-item label="企微好友">
            <el-select v-model="formData.is_wx_work" placeholder="请选择是否添加企微好友">
              <el-option label="不限制" :value="-1"></el-option>
              <el-option label="是" :value="1"></el-option>
              <el-option label="不是" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="activeName != 1">
          <el-form-item label="抖音企业号">
            <el-select v-model="formData.tiktok_number" placeholder="请选择抖音企业号">
              <el-option :label="item.nickname" :value="item.id" v-for="item in tiktokData" :key="item.id"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="客户阶段">
            <el-select v-model="formData.stage" placeholder="请选择客户阶段">
              <el-option label="全部" :value="0"></el-option>
              <el-option v-for="item in stageListOptList" :label="item.name" :value="item.id" :key="item.id"> </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="客户保护">
            <el-select v-model="formData.protect" placeholder="请选客户保护">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="未保护" :value="1"></el-option>
              <el-option label="已保护" :value="2"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="归属员工">
            <el-select v-model="formData.work_user_ids" popper-class="zw-hide_select_option" placeholder="请选择归属员工" multiple @click="openDepart" @change="changeDepart">
              <el-option v-for="item in workUserIds" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
            </el-select>
          </el-form-item></el-col
        >
        <el-col :span="8"
          ><el-form-item label="触达方式">
            <el-select v-model="formData.touch_mode" placeholder="请选择客户触达方式">
              <el-option :label="item.label" :value="item.value" v-for="item in touchArr" :key="item.value"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="客户标签">
            <el-select :popper-append-to-body="false" class="selectAvataryg" @click="openBatchLabel" @change="changeLabel" v-model="formData.tag_ids" multiple placeholder="选择客户标签">
              <el-option v-for="item in tabsList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
            </el-select>
          </el-form-item></el-col
        >
        <el-col :span="8"
          ><el-form-item label="客户状态">
            <el-select v-model="formData.cust_status" placeholder="请选择客户状态">
              <el-option label="全部" :value="-1"></el-option>
              <el-option label="已流失" :value="0"></el-option>
              <el-option label="正常" :value="1"></el-option>
              <el-option label="异常" :value="2"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col v-if="activeName != 1" :span="8"
          ><el-form-item label="所在地"> <el-cascader v-model="formData.address" :options="cityData" :props="defaultProps"></el-cascader> </el-form-item
        ></el-col>
        <el-col :span="8" v-if="activeName != 2"
          ><el-form-item label="所在企微群">
            <el-select @click="showGroupBox" popper-class="zw-hide_select_option" v-model="formData.group_chat" multiple placeholder="请选择所在群聊">
              <el-option label="全部" :value="0"></el-option>
              <el-option v-for="item in groupOptions" :key="item" :label="item.name" :value="item.group_id"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="创建时间">
            <el-date-picker :editable="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="formData.created_time" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" prefix-icon="Calendar" /> </el-form-item
        ></el-col>
        <el-col :span="8" v-if="activeName != 2"
          ><el-form-item label="添加时间">
            <el-date-picker
              :editable="false"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="formData.add_time"
              type="daterange"
              range-separator="—"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              prefix-icon="Calendar"
              @change="onChangeTime"
            /> </el-form-item
        ></el-col>
        <!-- <el-col :span="8" v-if="activeName == 2"
          ><el-form-item label="关注时间">
            <el-date-picker
              :editable="false"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="formData.follow_time"
              type="daterange"
              range-separator="—"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              prefix-icon="Calendar"
              @change="onChangeTime"
            /> </el-form-item
        ></el-col>
        <el-col :span="8" v-if="activeName == 2"
          ><el-form-item label="意向动作类型">
            <el-select v-model="formData.action_type" placeholder="请选择意向动作类型">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="私信" :value="1"></el-option>
              <el-option label="预约组件" :value="2"></el-option>
              <el-option label="个人主页" :value="3"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8" v-if="activeName == 2"
          ><el-form-item label="意向动作子类型">
            <el-select v-model="formData.action_flag" placeholder="请选择意向动作子类型">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="私信留电话" :value="1"></el-option>
              <el-option label="转化页留资" :value="52"></el-option>
              <el-option label="主页商家tab留资" :value="53"></el-option>
              <el-option label="智能电话拨打" :value="101"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8" v-if="activeName == 2">
          <el-form-item label="点赞数">
            <div style="display: flex">
              <el-input style="width: 100%" v-model.number="formNum.likesMin" onkeyup="value=value.replace(/[^0-9]/g,'')" placeholder="最小值"></el-input> —
              <el-input style="width: 100%" v-model.number="formNum.likesMax" onkeyup="value=value.replace(/[^0-9]/g,'')" placeholder="最大值"></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="activeName == 2">
          <el-form-item label="评论数">
            <div style="display: flex">
              <el-input v-model.number="formNum.commentsMin" onkeyup="value=value.replace(/[^0-9]/g,'')" placeholder="最小值"></el-input> —
              <el-input v-model.number="formNum.commentsMax" onkeyup="value=value.replace(/[^0-9]/g,'')" placeholder="最大值"></el-input>
            </div>
          </el-form-item>
        </el-col> -->
        <el-col
          ><el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset(1)">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold" @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
  </div>
  <ZWDepart ref="DepartRef" @submit="getDepart" :isLocal="true" />
  <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
  <GroupChart ref="GroupChartRef" @submit="getGroupFun" />
</template>



<script setup lang="ts">
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import BatchLabel from '@/components/BatchLabel.vue'
  import GroupChart from '@/components/chart/GroupChart.vue'
  import { stageList, sourceList } from '../../configure/api'
  import { getCustomerOpenseaSelect } from '@/api/customer/manage/list'
  import cityData from '@/assets/js/city'
  import { getSetionId, AFold } from '@/utils/utils'
  import { useRoute } from 'vue-router'
  import { tiktokList } from '@/api/customerCenter'
  import { reactive, defineEmits, ref, onMounted, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  interface Props {
    unaudited: any
    exportStatus: boolean
  }
  const route = useRoute()
  const appType = ref(route.query.str)
  // console.log(appType.value, 'props')
  //所在地
  const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'code'
  }
  const props = defineProps(['activeName', 'trillId'])
  const emit = defineEmits(['submit', 'getTableH'])
  const formData: any = ref({
    // source_id: appType.value.split(",")
  })
  const formNum: any = reactive({
    likesMin: '',
    likesMax: '',
    commentsMin: '',
    commentsMax: ''
  })
  const onSubmit = () => {
    if (formNum.likesMin > formNum.likesMax) {
      ElMessage.error('点赞数最小值不可以大于最大值！')
      return
    }
    if (formNum.commentsMin > formNum.commentsMax) {
      ElMessage.error('评论数最小值不可以大于最大值！')
      return
    }
    if (formNum.likesMin || formNum.likesMax) {
      formData.value.likes = [formNum.likesMin ? formNum.likesMin : 0, formNum.likesMax ? formNum.likesMax : 0]
    }
    if (formNum.commentsMin || formNum.commentsMax) {
      formData.value.comments = [formNum.commentsMin ? formNum.commentsMin : 0, formNum.commentsMax ? formNum.commentsMax : 0]
    }
    emit('submit')
  }
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }

  // 选择员工
  const DepartRef = ref<any>(null)
  const workUserIds = ref<any>([])

  const openDepart = () => {
    DepartRef.value.selectedMember = [...workUserIds.value]
    DepartRef.value.departVisble = true
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    console.log('-------获取员工--------', res)
    workUserIds.value = res
    formData.value.work_user_ids = getSetionId('id', workUserIds.value)
  }
  // 员工移除
  const changeDepart = (v: any) => {
    workUserIds.value = []
    formData.value.work_user_ids = []
    DepartRef.value.removeItem({ id: v })
  }
  // 打开选择标签弹框
  const tabsList = ref<any>([])
  const BatchLabelRef = ref<any>(null)
  const openBatchLabel = () => {
    // labelObj.type = type
    // labelObj.labelType = num
    BatchLabelRef.value.dialogData.delname = '不移除'
    BatchLabelRef.value.title = '选择客户标签'
    BatchLabelRef.value.dialogData.labelChooseType = 2
    BatchLabelRef.value.chooseDataArr = []
    if (tabsList.value.length > 0) {
      BatchLabelRef.value.chooseDataArr = tabsList.value
    }
    BatchLabelRef.value.dialogVisible = true
  }
  const getTagType = (val: number) => {
    switch (val) {
      case 0:
        return 3
      case 1:
        return 1
      case 2:
        return 2
    }
  }
  // 获取当前选中的标签
  const getTagsFun = async (val?: any) => {
    formData.value.tag_ids = val?.idList
    //  0: 无标签，1：满足任意一个标签， 2：同时满足所有标签
    formData.value.select_tag_type = getTagType(val.labelType)
    tabsList.value = val.data
  }
  //切换标签
  const changeLabel = (value: any, al: any) => {
    tabsList.value = tabsList.value.filter((item: any) => {
      return value.includes(item.id)
    })
  }
  // 显示群聊
  const GroupChartRef = ref<any>(null)
  const groupOptions = ref<any>([])
  const showGroupBox = () => {
    GroupChartRef.value.appDialog.visible = true
    GroupChartRef.value.echoDataId = formData.value.group_chat
  }
  // 获取群聊
  const getGroupFun = (val: any) => {
    formData.value.group_chat = []
    groupOptions.value = []
    if (val.length > 0) {
      val.forEach((item: any) => {
        groupOptions.value.push(item)
        formData.value.group_chat.push(item.group_id)
      })
    }
  }
  // 触达字典
  const touchArr = reactive([
    { label: '全部', value: -1 },
    { label: '短信', value: 0 },
    { label: '企业微信', value: 1 },
    { label: '微信', value: 2 },
    { label: '抖音消息', value: 3 },
    { label: '公众号', value: 4 },
    { label: '邮箱', value: 5 }
  ])

  // 获取客户阶段字典
  const stageListOptList = ref<any>([])
  const stageListFun = () => {
    stageList({ page: 1, page_size: 99999 }).then((r: any) => {
      stageListOptList.value = r || []
    })
  }
  stageListFun()
  // 客户来源
  const sourceArr = ref<any>([])
  const sourceListFun = () => {
    sourceList({ page: 1, page_size: 99999 }).then((r: any) => {
      r.data = r.data || []
      let arr = []
      r.data.forEach((it: any) => {
        // 全部放开
        arr.push(it)
        // if (it.status == 1) {
        //   // 开启的话显示
        //   arr.push(it)
        // }
      })
      sourceArr.value = arr
      console.log(arr, '客户来源')
    })
  }
  sourceListFun()
  const selectData = ref<any>([])
  const onGetSelectData = () => {
    getCustomerOpenseaSelect({ type: 1 }).then((res: any) => {
      selectData.value = res
    })
  }
  onGetSelectData()
  const tiktokData = ref<any>([])
  const getTiktokList = () => {
    let params = {
      action: 'select_list'
    }
    tiktokList(params).then((res: any) => {
      tiktokData.value = res
    })
  }
  getTiktokList()
  const onChangeTime = (v: any) => {
    console.log(v, '2222')
    v || (formData.value.add_time = [])
  }
  const onReset = (num:number)  => {
    const custArr = appType.value && appType.value.split(',').map((item) => +item)
    groupOptions.value = []
    tabsList.value = []
    formData.value = {
      tag_ids: [], //选择的标签
      add_time: [], //添加时间
      created_time: [], //创建时间
      work_user_ids: [], //员工id
      mobile_or_name: '', //客户手机号/姓名搜索
      is_wx_work: -1, //是否企微，-1: 全部， 0：非企微， 1：企微
      source_id: num !=1 && appType.value ? custArr : [], //全部
      touch_mode: -1, //可触达方式
      cust_status: -1, //客户状态  -1 全部  0已流失 1正常  2异常
      page: 1,
      page_size: 15,
      select_tag_type: -1,
      total: 0,
      stage: 0, //客户阶段 0 全部
      group_chat: 0, //客户群聊  0 全部
      protect: 0, //客户保护 0 全部
      seas_id: [],
      tiktok_number: '',
      action_type: 0,
      action_flag: 0,
      likes: [],
      comments: []
    }
    onSubmit()
  }
  watch(
    () => appType.value,
    (val) => {
      console.log(val)
    },
    { deep: true, immediate: true }
  )
  onMounted(() => {
    // if (appType.value) {
    //   formData.value.source_id = appType.value.split(',').map((item) => +item)
    //   onSubmit()
    // } else {
    //   onReset()
    // }
    onReset()

  })
  defineExpose({
    formData,
    onReset
  })
</script>

<style lang="scss" scoped>
  .customer_list_search {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;
    .item_box {
    }
  }
</style>
